<html lang="zh-cn" xmlns：th="http://www.thymeleaf.org" xmlns:th="http://www.w3.org/1999/xhtml">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>首页</title>
    <link th:href="@{https://fonts.googleapis.com/css?family=Work+Sans:300,400,700}" rel="stylesheet">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" th:href="@{/html/css/bootstrap/bootstrap.min.css}">

    <link rel="stylesheet" th:href="@{/html/css/bootstrap/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/html/css/animate.css}">
    <link rel="stylesheet" th:href="@{/html/css/owl.carousel.min.css}">
    <link rel="stylesheet" th:href="@{/html/fonts/ionicons/css/ionicons.min.css}">
    <link rel="stylesheet" th:href="@{/html/fonts/flaticon/font/flaticon.css}">
    <link rel="stylesheet" th:href="@{/html/fonts/fontawesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/html/css/bootstrap-datepicker.css}">
    <link rel="stylesheet" th:href="@{/html/css/select2.css}">
    <link rel="stylesheet" th:href="@{/html/css/helpers.css}">
    <link rel="stylesheet" th:href="@{/html/css/style.css}">


</head>


<body>
    <!-- 导航 nav -->
    <nav class="navbar navbar-expand-lg navbar-dark probootstrap_navbar" id="probootstrap-navbar">
        <div class="container">
            <a class="navbar-brand" style="font-size:42px; height: 100px;" href="/">富丽堂皇大宾馆</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#probootstrap-menu" aria-controls="probootstrap-menu" aria-expanded="false" aria-label="Toggle navigation">
    <span><i class="ion-navicon"></i></span>
  </button>
            <div class="collapse navbar-collapse" id="probootstrap-menu">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item" th:each="nav:${navList}"><a class="nav-link" style="font-size:20px;" th:href="${nav.url}" th:text="${nav.name}">
                    </a></li>
                    <li th:if="${#strings.isEmpty(session.loginName)}"class="nav-item"><a class="nav-link" style="font-size:20px;" th:href="@{/hotel/user/toLogin}">登录/注册</a></li>

                    <li th:if="${not #strings.isEmpty(session.loginName)}"class="nav-item"><a class="nav-link" style="font-size:20px;" th:href="@{/hotel/user/mine}" th:text="${session.loginName}"></a></li>
                    <li th:if="${not #strings.isEmpty(session.loginName)}"class="nav-item"><a class="nav-link" style="font-size:20px;" th:href="@{/hotel/logout}"  th:text="[退出]"></a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 导航 nav End -->

    <section class="probootstrap-cover overflow-hidden relative"
             th:style="'background-image: url('+@{/html/images/bg_1.jpg}+');
             padding-bottom: 10px;'"
             data-stellar-background-ratio="0.5" id="section-home">
        <div class="overlay"></div>
        <div class="container" style=" padding-bottom: 10px; width: 800px;">
            <div class="row align-items-center" style="padding-top: 10px; padding-bottom: 10px;width: 800px;">
                <div class="col-md">
                    <!-- <section style="background: white;" class="probootstrap_section" id="section-city-guides">
                        <div class="container"> -->

                    <section class="probootstrap-section-half d-md-flex" th:id="section-about" style="width: 800px;background:#fff; height: 200px;">

                        <div class="probootstrap-image probootstrap-animate" data-animate-effect="fadeIn" style="width: 800px; ">
                            <h4 class="roomtype" th:text="${room.type}">${room.type}
                                <a
                                   style="float: right;
                                   margin-right: 50px;
                                   font-size: 18px;
                                   color: crimson;
                                   text-decoration-line: underline;"
                                th:if="${room.rcount !=0}"
                                   th:href="@{/hotel/user/book?(id=${room.id })}"
                                >立即预订</a>

                                <span style="float: right;
                                   margin-right: 50px;
                                   font-size: 18px;
                                   color: crimson;
                                   text-decoration-line: underline;"
                                      th:if="${room.rcount ==0}">
                                    已订满
                                </span>
                            </h4>

                            <div class=" clearfix" style="float: left; margin:10px 0 0 40px;">
                                <div class="col-md-12 column">
                                    <img alt="140x140" th:src="@{/html/images/swdc.jpg}" class="img-thumbnail" style="width: 310px; height: 200px;" />
                                </div>
                            </div>
                            <div class="col-md-12 column" style="width: 400px; float:left; margin-top: 30px;margin-left: 0;">
                                <dl class="dl-horizontal" style="width: 350px; padding-left: 0;">
                                    <dt>建筑面积</dt>
                                    <dd >
                                        <span th:text="${room.area }">${room.area }</span>
                                        <span>m</span>
                                        <sup>2</sup>
                                    </dd>
                                    <dt>床&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</dt>
                                    <dd th:text="${room.bed }">${room.bed }</dd>
                                    <dt>窗&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;户</dt>
                                    <dd th:text="${room.havewindows }">${room.havewindows }</dd>
                                    <dt>加&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;床</dt>
                                    <dd th:text="${room.addbed }">${room.addbed }</dd>
                                </dl>

                                <div class="shebeilogo"><svg viewBox="0 0 24 24" role="presentation" aria-hidden="true" focusable="false" style="height: 24px; width: 24px; fill: currentcolor;"><path d="m12 15a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 5a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm5.92-5.78a.5.5 0 1 1 -.84.55c-1.19-1.81-3.07-2.77-5.08-2.77s-3.89.96-5.08 2.78a.5.5 0 0 1 -.84-.55c1.38-2.1 3.58-3.23 5.92-3.23s4.54 1.13 5.92 3.23zm2.98-3.03a.5.5 0 1 1 -.79.61c-1.66-2.14-5.22-3.8-8.11-3.8-2.83 0-6.26 1.62-8.12 3.82a.5.5 0 0 1 -.76-.65c2.05-2.42 5.75-4.17 8.88-4.17 3.19 0 7.05 1.8 8.9 4.19zm2.95-2.33a.5.5 0 0 1 -.71-.02c-2.94-3.07-6.71-4.84-11.14-4.84s-8.2 1.77-11.14 4.85a.5.5 0 0 1 -.72-.69c3.12-3.27 7.14-5.16 11.86-5.16s8.74 1.89 11.86 5.16a.5.5 0 0 1 -.02.71z" fill-rule="evenodd"></path></svg></div>
                                <div class="shebei"><span style="color: inherit;">无线网络</span></div>


                                <div class="shebeilogo"><svg viewBox="0 0 24 24" role="presentation" aria-hidden="true" focusable="false" style="height: 24px; width: 24px; fill: currentcolor;"><path d="m21.89 18a .5.5 0 0 1 -.68.18l-3.29-1.9.79 2.93a.5.5 0 0 1 -.97.26l-1.04-3.89-4.7-2.71v5.43l2.85 2.85a.5.5 0 1 1 -.71.71l-2.14-2.15v3.79a.5.5 0 1 1 -1 0v-3.79l-2.15 2.15a.5.5 0 1 1 -.71-.71l2.86-2.86v-5.43l-4.7 2.72-1.04 3.9a.5.5 0 1 1 -.97-.26l.79-2.93-3.28 1.9a.5.5 0 0 1 -.5-.87l3.28-1.9-2.93-.79a.5.5 0 0 1 -.35-.61.51.51 0 0 1 .61-.35l3.89 1.04 4.7-2.71-4.7-2.71-3.9 1.04a.5.5 0 0 1 -.61-.35.5.5 0 0 1 .35-.61l2.93-.79-3.28-1.9a.5.5 0 1 1 .5-.87l3.28 1.9-.78-2.93a.5.5 0 0 1 .97-.26l1.04 3.9 4.7 2.71v-5.42l-2.85-2.86a.5.5 0 1 1 .71-.71l2.14 2.15v-3.79a.5.5 0 1 1 1 0v3.79l2.15-2.15a.5.5 0 1 1 .71.71l-2.86 2.86v5.43l4.7-2.71 1.04-3.9a.5.5 0 1 1 .97.26l-.79 2.93 3.29-1.9a.5.5 0 1 1 .5.87l-3.29 1.89 2.93.79a.5.5 0 1 1 -.26.97l-3.89-1.05-4.7 2.71 4.7 2.71 3.9-1.05a.5.5 0 0 1 .26.97l-2.93.79 3.29 1.9a.5.5 0 0 1 .18.68z" fill-rule="evenodd"></path></svg></div>
                                <div class="shebei"><span style="color: inherit;">空调</span></div>

                                <div class="shebeilogo"><svg viewBox="0 0 24 24" role="presentation" aria-hidden="true" focusable="false" style="height: 24px; width: 24px; fill: currentcolor;"><path d="m23.5 4h-1.5v-1.5c0-1.38-1.12-2.5-2.5-2.5h-15a2.5 2.5 0 0 0 -2.5 2.5v1.5h-1.5a.5.5 0 1 0 0 1h1.5v15.5c0 .83.67 1.5 1.5 1.5h1.5v.5c0 .83.67 1.5 1.5 1.5h14c .83 0 1.5-.67 1.5-1.5v-17.5h1.5a.5.5 0 0 0 0-1zm-20.5-1.5c0-.82.67-1.5 1.5-1.5h15.01c.82 0 1.49.67 1.49 1.5v1.5h-2v-.51a.5.5 0 0 1 .5-.49.5.5 0 0 0 0-1 1.5 1.5 0 0 0 -1.5 1.5v11.5h-15zm0 13.5h15v2h-15zm .5 5a .5.5 0 0 1 -.5-.5v-1.5h15v1.51c0 .27-.23.5-.5.5h-14zm17.5 1.5c0 .28-.22.5-.5.5h-14a .5.5 0 0 1 -.5-.5v-.5h11.5c.83 0 1.5-.67 1.5-1.5v-15.5h2z" fill-rule="evenodd"></path></svg></div>
                                <div class="shebei"><span style="color: inherit;">生活必需品</span></div>

                            </div>
                        </div>

                    </section>

                    <section class="probootstrap-section-half d-md-flex" th:id="section-about" style="width: 800px;background:#fff; height: 300px;">
                        <div class="probootstrap-image probootstrap-animate detailBox" data-animate-effect="fadeIn" style="width:700px">
                            <h4>房间设施&nbsp;
                                <span>|可住</span>
                                <span th:text="${room.pcount }">${room.pcount }</span>
                                <span>人|</span>
                                <span th:text="${room.havebreakfast }">${room.havebreakfast }</span>
                            </h4>
                            <h6 class="firsth6"><strong>便利设施：</strong> <span th:text="${room.convenience }">${room.convenience }</span></h6>
                            <h6><strong>媒体科技：</strong><span th:text="${room.media }">${room.media }</span></h6>
                            <h6><strong>浴室:</strong><span th:text="${room.bath }">${room.bath }</span></h6>
                        </div>

                    </section>

                </div>
            </div>
        </div>
    </section>

    <!-- END section -->


    <!-- 页脚 footer -->
    <footer>
        <div class="container">
            <div class="col-md-12 text-center">
                <p class="probootstrap_font-14" style="color: black;">闽ICP备xxxxxxxx号 联系电话：xxx-xxxxxxxx </p>
                <p class="probootstrap_font-14" style="color: black;">富丽堂皇大酒店 版权所有 COPYRIGHT &copy; 2020. The Grand Hotel All Rights Reserved </p>
            </div>

        </div>
    </footer>
    <!-- 页脚 footer end -->


    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script th:src="@{/html/js/jquery.min.js}"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script th:src="@{/html/js/bootstrap.min.js}"></script>

<!--    <script th:src="@{https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js}"></script>-->

    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<!--    <script th:src="@{https://code.jquery.com/jquery.js}"></script>-->

<!--    <script th:src="js/bootstrap.min.js"></script>-->


    <script th:src="@{/html/js/popper.min.js}"></script>
    <script th:src="@{/html/js/owl.carousel.min.js}"></script>

    <script th:src="@{/html/js/bootstrap-datepicker.js}"></script>
    <script th:src="@{/html/js/jquery.waypoints.min.js}"></script>
    <script th:src="@{/html/js/jquery.easing.1.3.js}"></script>

    <script th:src="@{/html/js/select2.min.js}"></script>

    <script th:src="@{/html/js/main.js}"></script>
    <script type="text/javascript">
        function logout() {
            window.location.href = "logout"
        }
    </script>
</body>

</html>